<template>
  <transition name="fade">
    <div class="gift-list" id="gift-panel-container" v-show="visible">
      <div
        class="gift-item"
        v-for="(item, index) in defaultGifts"
        :key="item.price"
        @click="selectGift(index)"
      >
        <img :src="item.img" alt="" />
      </div>
    </div>
  </transition>

  <div id="lottie-wrapper" v-show="isAnimation">
    <Vue3Lottie
      ref="lottieAnimation"
      :animationData="lottieOption.path"
      :speed="lottieOption.speed"
      :loop="lottieOption.loop"
      @onComplete="loopComplete"
    />
  </div>
  <!-- <LottieAnimation :width="200" :height="200" :options="lottieOption" /> -->
</template>

<script setup lang="ts">
import { ref, reactive, watch } from "vue";
import { Vue3Lottie } from "vue3-lottie";
import gift from "./gift";

const lottieAnimation = ref(null);

const defaultGifts = gift;

// 礼物动画配置
interface lottieOption {
  id: number,
  renderer: string;
  loop: number;
  speed: number;
  autoplay: boolean;
  path: unknown;
}

const animationData = ref();
const isSelect = ref(false);
const isAnimation = ref(false);

const lottieOption = reactive<lottieOption>({
  id: 0,
  renderer: "svg",
  loop: 1,
  autoplay: true,
  speed: 1,
  path: "",
});

defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
});
// 监听选项变化
watch(
  () => isSelect.value,
  (newVal) => {
    if (newVal && !isAnimation.value) {
      isAnimation.value = true
      if (animationData.value) animationData.value.play();
    }
  }
);

const emit = defineEmits(["close"]);

const selectGift = (index: number) => {
  console.log(index,'+++++++++++++')
  isSelect.value = true
  lottieOption.id = defaultGifts[index].id;
  lottieOption.path = defaultGifts[index].animate;
  lottieOption.speed = defaultGifts[index].speed || 1;
  lottieOption.loop = defaultGifts[index].loop || 1;
  emit("close");
};
// 动画播放完
const loopComplete = () => {
  isAnimation.value = false
  isSelect.value = false
  if (animationData.value) animationData.value.destroy();
}
</script>

<style lang="less" scoped>
.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s ease; /* 缓动效果：ease */
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: translateY(20px);
}
.gift-list {
  width: 100%;
  height: auto;
  overflow: hidden;
  position: absolute;
  bottom: 52px;
  left: 0;
  display: flex;
  flex-wrap: wrap;
  background-color: rgba(51, 51, 51, 0.8);
  border-radius: 10px 10px 0 0;
  padding: 10px 12px;
  transition: all 0.2s linear;
  z-index: 10;
  .gift-item {
    display: flex;
    width: 20%;
    margin: 15px 0;
    justify-content: center;
    cursor: pointer;
    img {
      // width: 32px;
      height: 40px;
      object-fit: cover;
    }
  }
}
#lottie-wrapper {
  width: 80%;
  height: 80%;
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  // background: rgba(255, 255, 255, 0.2);
}
</style>
